<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="../plugins/elementui/new/index.css">
    <link rel="stylesheet" href="css/webbase.css">
    <style>
        body {
            background-color: #f5f5f5;
            color: #333;
            font-family: Arial, sans-serif;
        }

        .user-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 30px;
        }

        .user-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .user-info,
        .rental-history {
            margin-bottom: 20px;
        }

        .user-info p,
        .rental-history p {
            margin: 5px 0;
        }

        .rental-history {
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }

        .membership-buttons {
            margin: 30px 0;
            text-align: center;
        }

        .membership-buttons .el-button {
            margin: 0 10px;
        }

        .rental-history {
            margin-top: 40px;
        }

        .pagination {
            margin-top: 20px;
            text-align: center;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div id="app">
    <app-header></app-header>
    <div class="user-container">
        <h2 class="user-header">个人中心</h2>
        <div class="user-info">
            <h3>个人信息</h3>
            <el-descriptions :column="2" border v-cloak>
                <el-descriptions-item label="账号">{{ user.account }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
                <el-descriptions-item label="会员等级">
                    <el-tag :type="getRoleType(user.userRole)">
                        {{ getRoleName(user.userRole) }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="到期时间">{{ formatDate(user.accountExpirationDate) }}
                </el-descriptions-item>
                <el-descriptions-item label="手机号码">{{ user.phone || '未设置' }}</el-descriptions-item>
                <el-descriptions-item label="性别">
                    {{ user.gender === 'M' ? '男' : (user.gender === 'F' ? '女' : '其他') }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="membership-buttons">
            <el-dialog title="购买会员" :visible.sync="dialogVisible" width="30%">
                <el-form :model="membershipForm" label-width="100px">
                    <el-form-item label="会员类型">
                        <el-radio-group v-model="membershipForm.type">
                            <el-radio label="standard">普通会员</el-radio>
                            <el-radio label="premium">高级会员</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="购买时长">
                        <el-select v-model="membershipForm.duration">
                            <el-option label="1个月" value="1"></el-option>
                            <el-option label="3个月" value="3"></el-option>
                            <el-option label="6个月" value="6"></el-option>
                            <el-option label="12个月" value="12"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmPurchase">确 定</el-button>
          </span>
            </el-dialog>
            <!--        <el-button type="primary" @click="showMembershipDialog('standard')">购买普通会员</el-button>-->
            <!--        <el-button type="success" @click="showMembershipDialog('premium')">购买高级会员</el-button>-->

        </div>
        <div class="redeem-code">
            <h3>兑换码</h3>
            <el-input v-model="redeemCode" placeholder="请输入兑换码" style="width: 300px;"></el-input>
            <el-button type="primary" @click="redeemCodeSubmit">兑换</el-button>
        </div>
        <div class="rental-history">
            <h3>租用记录</h3>
            <el-table :data="rentals" style="width: 100%">
                <el-table-column prop="startTime" label="租用开始时间">
                    <template slot-scope="scope">
                        {{ scope.row.startTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="租用结束时间">
                    <template slot-scope="scope">
                        {{ scope.row.endTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="游戏名称"></el-table-column>
                <el-table-column prop="gameId" label="账号id"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" :current-page="queryParams.pageNo"
                               :page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</div>

<script src="/js/vue@2.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/top.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user: {
                    account: '',
                    email: '',
                    userRole: '',
                    accountExpirationDate: null,
                    phone: '',
                    gender: ''
                },
                rentals: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogVisible: false,
                membershipForm: {
                    type: 'standard',
                    duration: '1'
                },
                queryParams: {
                    pageNo: 1,
                    pageSize: 10
                },
                redeemCode: ''
            }
        },
        created() {
            this.getUserInfo().then(() => {
                this.getRentalHistory();
            });
        },
        methods: {
            formatDate(date) {
                if (!date) return '未设置';
                return new Date(date).toLocaleString();
            },
            async getUserInfo() {
                try {
                    const response = await fetch('/com/getUserInfo');
                    if (response.ok) {
                        const result = await response.json();
                        if (result.code === 200) {
                            this.user = result.data;
                        } else {
                            if (result.code === 403) {
                                this.$message.error('请先登录');
                                window.location.href = '/login.html';
                            } else {
                                this.$message.error(result.msg || '获取用户信息失败');
                            }
                        }
                    }
                } catch (error) {
                    console.error('Error:', error);
                    this.$message.error('获取用户信息失败');
                }
            },
            async getRentalHistory() {
                try {
                    const response = await fetch(`/com/rentals/page?pageNo=${this.queryParams.pageNo}&pageSize=${this.queryParams.pageSize}`);
                    if (response.ok) {
                        const result = await response.json();
                        this.rentals = result.records;
                        this.total = result.total;
                    }
                } catch (error) {
                    console.error('Error:', error);
                    this.$message.error('获取租用记录失败');
                }
            },
            showMembershipDialog(type) {
                this.membershipForm.type = type;
                this.dialogVisible = true;
            },
            async confirmPurchase() {
                try {
                    const response = await fetch('/api/membership/purchase', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.membershipForm)
                    });

                    if (response.ok) {
                        this.$message.success('购买成功');
                        this.dialogVisible = false;
                        this.getUserInfo(); // 刷新用户信息
                    } else {
                        this.$message.error('购买失败');
                    }
                } catch (error) {
                    this.$message.error('购买失败，请稍后重试');
                }
            },
            handleCurrentChange(page) {
                this.queryParams.pageNo = page;
                this.getRentalHistory();
            },
            getRoleType(role) {
                switch (role) {
                    case '1':
                        return 'danger';    // 管理员
                    case '2':
                        return 'info';      // 用户
                    case '3':
                        return 'warning';   // 普通会员
                    case '4':
                        return 'success';   // 高级会员
                    default:
                        return 'info';
                }
            },
            getRoleName(role) {
                switch (role) {
                    case '1':
                        return '管理员';
                    case '2':
                        return '用户';
                    case '3':
                        return '普通会员';
                    case '4':
                        return '高级会员';
                    default:
                        return '用户';
                }
            },
            async redeemCodeSubmit() {
                if (!this.redeemCode) {
                    this.$message.error('请输入兑换码');
                    return;
                }
                try {
                    const response = await axios.post('/com/redeemCode/redeem',{redeemCode: this.redeemCode});
                    if (response.data.success) {
                        this.$message.success('兑换成功');
                        this.redeemCode = ''; // 清空输入框
                        this.getUserInfo();
                    } else {
                        this.$message.error(response.data.msg || '兑换失败');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    this.$message.error('兑换失败，请稍后重试');
                }
            }
        }
    });
</script>
</body>

</html>